<template>
  <view class="group">
    <!-- 头部 -->
    <view class="topbox">
      <view class="top-top">

      </view>
      <view class="topitem">
        <view style="width: 20%;position: relative;">
          <image src="../../static/resort/fanhui.png" mode="" style="width: 18rpx;height: 36rpx;" @click="tomessage()">
          </image>
        </view>
        <view class="toptit">
          群二维码名片
        </view>
        <view style="width:20%;text-align: right;">
          <image src="../../static/message/three_drop.png" style="width: 40rpx;height: 14rpx;" mode=""></image>
        </view>
      </view>
    </view>
    <!-- 头部 -->
    <view style="height: 180rpx;">

    </view>
    <view class="content">
      <view class="top">
        <image src="../../static/message/nine_friend.png" class="nine" mode=""></image>
        <view class="text">
          拼夕夕互助点赞万人群
        </view>
      </view>
      <view class="img">
        <image src="../../static/message/block-erweima.png" class="bigerweima" mode=""></image>
      </view>
      <view class="text1 " style="color: #ccc;">
        该群主已开启二维码进群,可通过扫一扫快速进群

      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    },
    methods: {
      tomessage() {
        uni.navigateTo({
          url: '../message/groupMessage',
          success: res => {},
          fail: () => {},
          complete: () => {}
        });
      }
    }
  }
</script>

<style lang="scss">
  // 头部
  .topbox {
    width: 100vw;
    background-color: white;
    position: fixed;
    z-index: 99;

    .top-top {
      width: 100%;
      height: var(--status-bar-height);
    }

    .topitem {
      border-bottom: solid 2rpx #E5E5E5;
      width: 100%;
      height: 100rpx;
      background-color: white;
      display: flex;
      padding: 23rpx 50rpx;
      box-sizing: border-box;

      .addfriend {
        position: absolute;
        top: 50rpx;
        left: 0;
        background-color: #505050;
        width: 240rpx;
        height: 220rpx;
        border-radius: 20rpx;

        .afone {
          color: white;
          height: 50%;
          width: 100%;
          text-align: center;
          font-size: 30rpx;
          line-height: 120rpx;
          border-bottom: solid #F5F5F5 2rpx;
        }

        .aftwo {
          color: white;
          height: 50%;
          width: 100%;
          text-align: center;
          font-size: 30rpx;
          line-height: 120rpx;
        }
      }

      .toptit {
        width: 60%;
        text-align: center;
        font-size: 33rpx;
        font-weight: bold;
      }
    }
  }

  // 头部
  .content {
    // margin-top: 30rpx;
    width: 90vw;
    margin: 30% auto 0;
    background-color: #fff;
    padding: 5% 5%;
    box-sizing: border-box;
    border-radius: 20rpx;

    .top {
      display: flex;
      align-items: center;
      margin-bottom: 40rpx;

      .nine {
        width: 146rpx;
        height: 146rpx;
      }

      .text {
        color: rgb(51, 51, 51);

        font-family: Noto Sans SC;
        margin-left: 30rpx;
        font-size: 18px;
        font-weight: bold;
      }
    }

    .img {
      margin-bottom: 10rpx;

      .bigerweima {
        width: 100%;
        height: 600rpx;
      }
    }
  }
</style>